<template>
  <div>
    <my-header></my-header>
    <div class="top-block"></div>
    <div id="finance">


      <!--已结算薪资  -->
      <div class="salary">
        <p class="tit">已结算奖励工资（税前）</p>
        <div class="money">
          <div class="number"><span>￥</span>{{totalWages}}</div>
          <p>已结算工资</p>
        </div>
      </div>

      <div class="content-box">
        <div class="content">
          <p class="tit">预估奖励工资（税前）<span class="right">{{nowTime.year}}年{{nowTime.month}}月</span></p>
          <p class="txt">销售佣金<span class="right">¥{{montyWages.xiaoshou_fee}}</span></p>
          <p class="txt">培训津贴<span class="right">¥{{montyWages.peixun_fee}}</span></p>
          <p class="txt">团队管理奖<span class="right">¥{{montyWages.guanli_fee}}</span></p>
          <p class="txt">伯乐奖<span class="right">¥{{montyWages.bole_fee}}</span></p>
          <p class="txt" v-if="montyWages.daili_type == 2">代理佣金<span class="right">¥{{montyWages.daili_fee}}</span></p>
        </div>
      </div>


      <div class="content-box">
        <div class="content">
          <p class="tit">历史已结算奖励工资（税前）<span class="right" @click="selectYear">{{year}}年{{month}}月<img class="img" src="../../assets/icon/upward.png"
                alt=""></span></p>
          <my-notice v-if='nowTime.month == month && nowTime.year == year'></my-notice>
          <div v-else>
            <p class="txt">销售佣金 <span class="right">¥{{pastWages.xiaoshou_fee}}</span></p>
            <p class="txt">培训津贴<span class="right">¥{{pastWages.peixun_fee}}</span></p>
            <p class="txt">团队管理奖<span class="right">¥{{pastWages.guanli_fee}}</span></p>
            <p class="txt">伯乐奖<span class="right">¥{{pastWages.bole_fee}}</span></p>
            <p class="txt" v-if="pastWages.daili_type == 2">代理佣金<span class="right">¥{{pastWages.daili_fee}}</span></p>
            <p class="txt">本月实际工资<span class="right f9c4c">¥0</span></p>
          </div>

        </div>
      </div>




      <mt-datetime-picker v-model="dateValue" type="date" ref="datePicker" year-format="{value} 年" month-format="{value} 月"
        date-format="{value} 日" :endDate="new Date()" @confirm="handleConfirm">
      </mt-datetime-picker>





    </div>
    <div class="bottom-block"></div>
    <my-footer></my-footer>
  </div>
</template>

<script>
  import {get_total_wages,get_wages_by_monty} from '@/api/';
  export default {
    data() {
      return {
        nowTime:'',//当前年月
        dateValue: '',
        year: '2019',
        month: '10',
        totalWages:'',//已结算薪资
        montyWages:'',//预计结算薪资
        pastWages:'',//历史结算
        pastMoth:null,
        tel:'',
      }
    },
    methods: {
      selectYear() {
        this.$refs.datePicker.open();
        var pickerSlot = document.getElementsByClassName('picker-slot');
        pickerSlot[2].style.display = 'none'
      },
      handleConfirm(value) {
        this.year = value.getFullYear();
        this.month = value.getMonth() + 1;
        this.date = value.getDate();
        let pastTime = this.year + '-' + this.month;
        this.pastMoth = this.month;
        get_wages_by_monty({tel:this.tel,time:pastTime}).then(res =>{
          // console.log(res)
          this.pastWages = res.data;
        });
      },
      getTotalWages(){
        this.tel = JSON.parse(localStorage.getItem('tel'));
        get_total_wages({tel:this.tel}).then(res =>{
          // console.log(res)
          this.totalWages = res.data;
        })
      },
      getNowTime(){
        let nowDate = new Date()
        this.nowTime = {
          year: nowDate.getFullYear(),
          month: nowDate.getMonth() + 1,
        }
        let timeEstimate = this.nowTime.year + '-' + this.nowTime.month;
        // 已结算
        get_wages_by_monty({tel:this.tel,time:timeEstimate}).then(res =>{
          this.montyWages = res.data;
        })
        // 历史
        let month = Number(this.nowTime.month) - 1;
        let pastTime0 = this.nowTime.year + '-' + month;
        get_wages_by_monty({tel:this.tel,time:pastTime0}).then(res =>{
          this.pastWages = res.data;
        })
      }
    },
    mounted() {
      this.getTotalWages();
      this.getNowTime();
    }


  }
</script>

<style scoped>
  .f9c4c {
    color: #FF9C4C;
  }

  #finance {
    font-size: 12px;
    color: #666666;
  }

  .tit {
    font-size: 14px;
    color: #333333;
  }

  .salary {
    padding: 20px 0;
    background-color: #fff;
    text-align: center;
  }

  .salary .money {
    padding-top: 13px;
    background-color: #fafafa;
    width: 240px;
    margin: 20px auto;
  }

  .salary .money .number {
    color: #FF9C4C;
    font-size: 30px;
    font-weight: bold;
  }

  .salary .money .number>span {
    font-size: 14px;
    margin-top: 10px;
  }

  .salary .money>p {
    color: #999999;
  }

  .content-box .content {
    padding: 11px 0px 0;
    text-align: start;
    margin: 10px;
  }

  .content-box .content .tit {
    padding-bottom: 23px;
  }

  .content-box .content .tit .right {
    color: #999999;
  }

  .content-box .content .right {
    right: 1em;
    font-size: 14px;
    font-weight: bold;
  }

  .content-box .content .txt {
    padding-bottom: 13px;
  }

  .seeDetail {
    padding: 3px 6px;
  }

  .img {
    width: 10px;
  }
</style>
